<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>case1</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src="js/three.js"></script>
</head>

<body>
    <script>
        var renderer = new THREE.WebGLRenderer();
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        var geometry = new THREE.BufferGeometry();
        /**
         * 页面场景、相机加载函数
         **/
        function init() {
            var point = new THREE.PointLight(0xffffff);
            point.position.set(400, 200, 300); //点光源位置
            scene.add(point); //点光源添加到场景中
            //环境光
            var ambient = new THREE.AmbientLight(0x444444);
            scene.add(ambient);
            camera.position.set(200, 300, 200); //设置相机位置
            camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
            renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染区域尺寸
            renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
            document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
        }
        /**
         * 添加调试坐标轴
         **/
        function axesHelper() {
            var axisHelper = new THREE.AxesHelper(250);
            scene.add(axisHelper);
        }
        /**
         * 自定义几何体
         **/
        function self_geometry() {
            var geometry = new THREE.BufferGeometry();
            var vertices = new Float32Array([
                0, 0, 0, //顶点1坐标
                50, 0, 0, //顶点2坐标
                0, 100, 0, //顶点3坐标
                0, 0, 0, //顶点4坐标
                0, 0, 100, //顶点5坐标
                50, 0, 0, //顶点6坐标
            ]);
            var colors = new Float32Array([
                0, 0, 0, //顶点1颜色
                1, 0, 1, //顶点2颜色
                0, 1, 0, //顶点3颜色
                1, 1, 1, //顶点4颜色
                0, 1, 1, //顶点5颜色
                0, 0, 1, //顶点6颜色
            ]);
            var normals = new Float32Array([
                0, 0, 1, //顶点1法向量
                0, 0, 1, //顶点2法向量
                0, 0, 1, //顶点3法向量
                0, 1, 0, //顶点4法向量
                0, 1, 0, //顶点5法向量
                0, 1, 0, //顶点6法向量
            ]);
            geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);
            geometry.attributes.color = new THREE.BufferAttribute(colors, 3);
            geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3个为一组,表示一个顶点的法向量数据
            var material = new THREE.MeshBasicMaterial({
                vertexColors: THREE.VertexColors,
                side: THREE.DoubleSide
            });
            var mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);
        };
        /**
         * 点模型
         **/
        function self_points() {
            var geometry = new THREE.BufferGeometry();
            var vertices = new Float32Array([
                10, 30, 10, //顶点1坐标
                10, 100, 30, //顶点2坐标
                5, 15, 50, //顶点3坐标
                20, 60, 100, //顶点4坐标
                40, 60, 100, //顶点5坐标
                50, 33, 100, //顶点6坐标
            ]);

            var colors = new Float32Array([
                0, 0, 0, //顶点1颜色
                1, 0, 1, //顶点2颜色
                0, 1, 0, //顶点3颜色
                1, 1, 1, //顶点4颜色
                0, 1, 1, //顶点5颜色
                0, 0, 1, //顶点6颜色
            ]);
            var attribue = new THREE.BufferAttribute(vertices, 3);
            geometry.attributes.position = attribue;
            geometry.attributes.color = new THREE.BufferAttribute(colors, 3);
            var material1 = new THREE.PointsMaterial({
                vertexColors: THREE.VertexColors,
                size: 10.0
            });
            var points = new THREE.Points(geometry, material1);
            scene.add(points);
        };
        /**
         * 线模型测试
         **/
        function self_line() {
            var geometry = new THREE.BufferGeometry();
            var vertices = new Float32Array([
                0, 0, 0, //顶点1坐标
                100, 0, 0, //顶点2坐标
                0, 10, 30, //顶点3坐标
                200, 0, 10, //顶点4坐标
                0, 50, 10, //顶点5坐标
                50, 10, 10, //顶点6坐标
            ]);
            var attribue = new THREE.BufferAttribute(vertices, 3);
            geometry.attributes.position = attribue;
            var material2 = new THREE.LineBasicMaterial({
                color: 0xff0000,
            });
            var line = new THREE.Line(geometry, material2);
            scene.add(line);
        }
        /**
         * 法向量数据测试
         **/
        function self_faxiangliang() {
            
        }
                /**
         * 页面渲染
         **/
         function render() {
            console.log("------");
            geometry.rotateX(Math.PI/4);
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }
        init();
        render();
        axesHelper();
        self_geometry();
        self_points();
        self_line();
    </script>
</body>

</html>